<!DOCTYPE html>
<html>

	<head lang="en">
		<title>找攻略</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		
		   <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
			<script src="/js/jquery/jquery.min.js"></script>
			<script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
			<link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
			<link rel="stylesheet" href="/css/reset.css"/>
			<link rel="stylesheet" href="/css/strategyComment.css" />
			<script src="/js/plugins/jrender/jrender.min.js"></script>
			<link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
			<script src="/js/plugins/dialog2/dialog.min.js"></script>
		    <link rel="stylesheet" href="/js/plugins/dist/dialog.css" />
			<script src="/js/plugins/dist/mDialogMin.js"></script>
			<script src="/js/common.js"></script>
		<script>
			$(function () {
				//获取主评论id
				var params = getParams();
				//获取当前登录用户,评论者
				var user = JSON.parse(sessionStorage.getItem("user"));

				//根据主评论id查询主评论
				$.get(baseUrl+'/strategyComments/'+params.id,function (data) {
					$(".comment").renderValues(data,{
						getHref: getHref
					});
				});

				var currentPage = 1;    // 默认第一页
				var pages;  // 总页数
				var loading = false;    // 标记是否查询中
				var commentArr = []; // 评论存储的容器

				function query() {  // 分页查询
					if (loading) {    // 代表正在查询,就直接结束方法
						return;
					}
					loading = true; // 标记正在查询中;
					// 根据主评论id查询评论信息
					$.get(baseUrl + "/strategyComments/" + params.id + "/strategySonComments", {currentPage: currentPage}, function (data) {
						$.merge(commentArr, data.list);  // 合并数据,把第二个参数的数据合并到第一个参数的容器中
						var json = {list: commentArr};    // 用于render-loop="list"
						$(".comment-list").renderValues(json, {
							getHref: getHref,
							getCommentId:function (item, value) {
								$(item).attr("data-id", value);
							},
							getGrandSonCommentId:function (item, value) {
								$(item).attr("data-id", value);
							}
						});
						// 绑定图片的点击事情
						$(".comment-img img").click(function () {
							// 获取点击的图片
							var src = $(this).attr('src');
							$(document).dialog({
								style: 'ios',
								titleShow: false,
								overlayClose: true,
								content: '<img src="' + src + '" width="100%"/>'
							});
						});
						currentPage++;  // 当前页数+1
						pages = data.pages; // 设置总页数
						loading = false;    // 标记查询结束

						//回复弹框
						$(".replyBtn").click(function(){
							//获得回复的评论id
							var commentId = $(this).data('id');
							console.log(commentId);
							//根据type判断评论类型
							var type=$(this).data('type');
							console.log(type);
							Dialog.init('<input type="text" placeholder="请输入您的回复"  style="margin:8px 0;width:100%;padding:11px 8px;font-size:15px; border:1px solid #999;"/>',{
								title : '输入点什么吧！',
								button : {
									确定 : function(){
										if (type==1){
											//添加一级评论
											$.post(baseUrl + "/strategyComments/" + params.id + "/strategySonComment",
													{
														"content":this.querySelector('input').value,
														"parent.id":params.id,
														"user.id":user.id
													},function (data) {

													})
											Dialog.init('回复成功!');
											Dialog.close(this);
											//刷新页面
											window.location.reload();
										}else if (type==0) {

											//添加二级评论
											$.post(baseUrl + "/strategyComments/" + params.id + "/strategyGrandSonComment",
													{
														"content":this.querySelector('input').value,
														"strategySonComment.parent.id":params.id,
														"user.id":user.id,
														"strategySonComment.id":commentId,
														"replyType":0
													},function (data) {

													})
											Dialog.init('回复成功!');
											Dialog.close(this);
											//刷新页面
											window.location.reload();
										}else if (type==2){
											//添加内回复类型二级评论
											$.post(baseUrl + "/strategyComments/" + params.id + "/strategyGrandSonComment",
													{
														"content":this.querySelector('input').value,
														"user.id":user.id,
														"strategyGrandSonComment.id":commentId,
														"replyType":1
													},function (data) {

													})
											Dialog.init('回复成功!');
											Dialog.close(this);
											//刷新页面
											window.location.reload();
										}


									},
									点击关闭 : function(){
										Dialog.close(this);
									}
								}
							});
						})
					});
				}

				// 默认查询第一页
				query();
				// 监听窗口的滚动事件
				$(window).scroll(function () {
					console.log("窗口滚动中...")
					console.log($(document).scrollTop() + $(window).height())
					console.log( $(document).height()-350)
					if ($(document).scrollTop() + $(window).height() >= $(document).height()-350) { // 滚动到底部
						// 如果已经查询到最后一页,就不再查
						if (currentPage <= pages) {
							query();
						} else {
							$(document).dialog({
								type: 'notice',
								content: '<span class="info-text">已经到底了!</span>',
								autoClose: 1500
							});
						}
					}
				});




			})

		</script>
	</head>

	<body>
		<div class="search-head">
			<div class="row nav-search">
				<div class="col">
					<a href="javascript:window.history.go(-1)" class="my-arrow">
						<span><i class="fa fa-chevron-left"></i></span>
					</a>
				</div>
				<div class="col">
					<span>点评详情</span>
				</div>
				<div class="col"></div>
			</div>
		</div>



		<!--主评论-->
		<div class="comment">
			<div class="container ">
				<div class="row">
					<div class="col-2 comment-head">
						<a render-key="user.id" render-fun="getHref" data-url="/userProfiles.html?id=">
							<img class="rounded-circle" render-src="user.headImgUrl">
						</a>
						<button class="btn" id="followBtn"><i class="fa fa-hand-o-right"> </i> 关注</button>
					</div>
					<div class="col">
						<span render-html="user.nickName" style="font-size: 10px;color: darkgreen"></span>
						<span class="comment-date" render-html="createTime">2018</span>
						<div class="comment-content" render-html="content">
							<p >骑了个单车到沙面，春风把从上下九和宝华路带来的燥热吹散。沙面临江，下午的时光让这富有异国风情的公园显得更加宁静惬意，哪怕只是空手来散散步都是好的。</p>
						</div>
						<ul class="comment-img" render-loop="imgUrlsArr">
							<li>
								<img render-src="imgUrlsArr.self">
							</li>
						</ul>
						<div class="comment-link">
							<a render-key="strategy.id" render-fun="getHref" data-url="/strategyCatalogs.html?id=">
								<img  render-src="strategy.coverUrl"> <span render-html="strategy.title"></span>
								<i class="fa fa-angle-right fa-2x"></i>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<HR align=center width=450 color=black SIZE=2>
		<i style=";font-size: 15px;color: blue">TA的评论:</i><br><br>


		<!--一级评论-->
		<div class="comment-list">
			<div render-loop="list">
			<div class="container ">

				<br>
				<span render-html="list.id"></span><span>楼:</span>
				<div class="row">
					<div class="col-2 comment-head">
						<a render-key="list.user.id" render-fun="getHref" data-url="/userProfiles.html?id=">
							<img class="rounded-circle" render-src="list.user.headImgUrl">
						</a>
					</div>
					<div class="col">
						<span render-html="list.user.nickName" style="font-size: 10px;color: darkgreen"></span>
						<span class="comment-date" render-html="list.createTime">2018</span>
						<a class="mDialogs replyBtn"  render-key="list.id" render-fun="getCommentId" style="font-size: 15px;color: orange" data-type="0">回复</a>
						<div class="comment-content" render-html="list.content">
							<p style="text-align:center">骑了个单车到沙面，春风把从上下九和宝华路带来的燥热吹散。沙面临江，下午的时光让这富有异国风情的公园显得更加宁静惬意，哪怕只是空手来散散步都是好的。</p>
						</div>
						<HR>
						<i style=";font-size: 10px;color: purple">TA的回复:</i><br><br>
						<!--二级评论-->
						<div id="reply">
						<div render-loop="list.grandSonComments">
							<div class="container ">
								<div class="row">
									<div class="col-2 comment-head">
										<a render-key="list.grandSonComments.user.id" render-fun="getHref" data-url="/userProfiles.html?id=">
											<img class="rounded-circle" render-src="list.grandSonComments.user.headImgUrl">
										</a>
									</div>
									<div class="col">
										<span render-html="list.grandSonComments.user.nickName" style="font-size: 10px;color: darkgreen"></span>
										<a render-key="list.grandSonComments.replyUser.id" render-fun="getHref" data-url="/userProfiles.html?id=" render-html="list.grandSonComments.replySentence" style="font-size: 10px;color: deepskyblue"></a>
										<span style="font-size: 10px" class="comment-date" render-html="list.grandSonComments.createTime">2018</span>
										<a class="mDialogs replyBtn"  render-key="list.grandSonComments.id" render-fun="getGrandSonCommentId" style="font-size: 10px;color: orangered" data-type="2">回复TA</a>
										<div class="comment-content" render-html="list.grandSonComments.content">
											<p style="text-align:center">骑了个单车到沙面，春风把从上下九和宝华路带来的燥热吹散。沙面临江，下午的时光让这富有异国风情的公园显得更加宁静惬意，哪怕只是空手来散散步都是好的。</p>
										</div>
										<HR>
									</div>
								</div>
							</div>
						</div>
						</div>
					</div>
				</div>
			</div>
			</div>
		</div>

		<div class="operation">
			<div class="d-flex justify-content-between">
				<div class="p-2"><i class="fa fa-commenting-o"></i> <span class="mDialogs replyBtn"  href="javascript:;"  data-type="1">添加你的评论吧</span></div>
				<div class="p-2"><i class="fa fa-star-o"></i> 收藏</div>
			</div>
		</div>




		<script>

		</script>

	

</body>

</html>